<template>
  <div class="margin-container-list">
    <div class="margin-container-list radius-container">
      <template v-if="taskStatus !== '80'">
        <template v-if="remunerationTypeModel === '12'">
          <el-steps :active="activeNum" class="step-bar div-styls" finish-status="success" align-center>
            <el-step title="发布需求"></el-step>
            <el-step title="酬金托管"></el-step>
            <el-step title="进行中"></el-step>
            <el-step title="已完成"></el-step>
          </el-steps>
        </template>
        <template v-else>
          <el-steps :active="activeNum" class="step-bar div-styls" finish-status="success" align-center>
            <el-step title="发布需求"></el-step>
            <el-step title="酬金托管"></el-step>
            <el-step title="报名录用"></el-step>
            <el-step title="进行中"></el-step>
            <el-step title="已完成"></el-step>
          </el-steps>
        </template>
      </template>
      <template v-else>
        <el-steps :active="4" class="step-bar div-styls" finish-status="error" align-center>
          <el-step title="工作中"></el-step>
          <el-step title="已中止"></el-step>
          <el-step title="已中止"></el-step>
          <el-step title="已中止"></el-step>
        </el-steps>
      </template>
    </div>
    <div class="margin-container-list radius-container">
      <div style="height: 70px; line-height: 70px; background-color: #e96f6f" class="text-align-c" v-if="taskStatus === '10'">
        <span style="font-size: 24px">发布托管后，微客才能收到您的任务！</span>
      </div>
      <div style="height: 70px; line-height: 70px; background-color: #e96f6f" class="text-align-c" v-if="taskStatus === '20'">
        <span style="font-size: 24px">全额托管酬金后，微客才能收到您的任务！</span>
      </div>
      <div style="height: 70px; line-height: 70px; background-color: #F8C400" class="text-align-c" v-if="taskStatus === '40'">
        <span style="font-size: 24px" v-if="signNumStatus">距离报名截止时间还剩 <span style="color: red">{{ signNum }}</span> 天</span>
        <span style="font-size: 24px" v-if="!signNumStatus">已超出原定报名周期时间 <span style="color: red">{{ signNum }}</span> 天</span>
      </div>
      <div style="height: 70px; line-height: 70px; background-color: #61A7F3" class="text-align-c" v-if="taskStatus === '60'">
        <span style="font-size: 24px; color: #FFFFFF" v-if="taskNumStatus">距离任务截止时间还剩 <span style="color: #FFD100">{{ taskNum }}</span> 天</span>
        <span style="font-size: 24px; color: #FFFFFF" v-if="!taskNumStatus">已超出原定任务周期 <span style="color: #FFD100">{{ taskNum }}</span> 天</span>
      </div>
      <div style="height: 70px; line-height: 70px; background-color: #10C261" class="text-align-c" v-if="taskStatus === '70'">
        <span style="font-size: 24px">合作顺利,任务完成</span>
      </div>
      <div style="height: 70px; line-height: 70px; background-color: #e96f6f" class="text-align-c" v-if="taskStatus === '80'">
        <span style="font-size: 24px">项目已中止</span>
      </div>
    </div>
    <div class="margin-container-list radius-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="任务详情" name="0"></el-tab-pane>
        <template v-if="taskStatus !== '20' && taskStatus !== '10'">
          <el-tab-pane :label="enrollListName" name="1" v-if="taskStatus === '40' && remunerationTypeModel !== '12'"></el-tab-pane>
          <el-tab-pane :label="takelListName" name="2" v-if="remunerationTypeModel !== '12'"></el-tab-pane>
          <el-tab-pane :label="commissionListName" name="3" v-if="taskStatus !== '40'"></el-tab-pane>
        </template>
        <el-tab-pane :label="logListNum" name="4"></el-tab-pane>
      </el-tabs>
      <template v-if="activeName === '0'">
        <task-info ref="taskInfoDetail" :taskId="taskId"></task-info>
      </template>
      <template v-if="activeName === '1'">
        <task-member-sign :taskId="taskId" :status="activeName"></task-member-sign>
      </template>
      <template v-if="activeName === '2'">
        <task-member-employ :taskId="taskId" :status="activeName"></task-member-employ>
      </template>
      <template v-if="activeName === '3'">
        <task-commission :taskId="taskId" :remunerationTypeModel="remunerationTypeModel"></task-commission>
      </template>
      <template v-if="activeName === '4'">
        <task-log :taskId="taskId"></task-log>
      </template>
    </div>
    <el-date-picker v-if="dateSign"
                    v-model="starEndTimeSign"
                    type="daterange"
                    align="right"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    unlink-panels
                    value-format="yyyy-MM-dd"
                    @change="changeDateTimeSign">
    </el-date-picker>
    <el-date-picker v-if="dateDiv"
                    v-model="starEndTime"
                    type="daterange"
                    align="right"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    unlink-panels
                    value-format="yyyy-MM-dd"
                    @change="changeDateTime">
    </el-date-picker>
    <div class="pad-t-30"></div>
    <div class="border-t text-align-c pad-t-20 pad-b-30 mar-t-30">
      <el-button @click="$router.go(-1)">返回上一级</el-button>
      <el-button @click="moreOperations" v-if="!(taskStatus === '70' || taskStatus === '80' || taskStatus === '10') && taskStatus !== '20'">更多操作</el-button>
      <el-button type="danger" @click="trusteeship" v-if="taskStatus === '20'">立即托管</el-button>
      <el-button type="danger" @click="buttonClickEnd" v-if="taskStatus === '40' && moreOperationsFrom">结束报名</el-button>
      <el-button type="primary" @click="buttonClickSign" v-if="taskStatus === '40' && moreOperationsFrom">修改报名时间</el-button>
      <el-button type="primary" @click="buttonClick" v-if="taskStatus === '60' && moreOperationsFrom">修改任务时间</el-button>
      <el-button type="danger" @click="buttonClickStop" v-if="taskStatus === '60' && moreOperationsFrom">中止任务</el-button>
    </div>
    <!-- 立即托管弹窗 -->
    <el-dialog title="为保证双方利益，在托管酬金后微客才能报名参与任务" :visible.sync="financeVisible" :close-on-press-escape="true" class="payment-box" width="650px">
      <task-payment :taskId="taskId" v-if="financeVisible"></task-payment>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
  .time-line{
    width: 20%;
    float: left;
    .time-box{
      position: fixed;
      width: 19%;
      right: 0;
      top: 95px;
    }
  }
  .detila-div-80{
    float: left;
    width: 80%;
  }

  .div-styls{
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .el-tabs__item{
    font-size: 20px;
  }
</style>

<script>
  import { getTaskInfo, doSignEnd, saveTaskInfoStatus, countListNum } from '@/api/project/taskInfo'
  import TaskLog from '@/components/Project/TaskLog'
  import TaskMemberEmploy from '@/components/Project/TaskMemberEmploy'
  import TaskMemberSign from '@/components/Project/TaskMemberSign'
  import TaskInfo from '@/components/Project/TaskInfo'
  import TimeLine from '@/components/Project/TimeLine'
  import PositionList from '@/components/Project/PositionList'
  import TaskCommission from '@/components/Project/TaskCommission'
  import TaskPayment from '@/components/Finance/TaskPayment'
  export default {
    components: {
      TaskLog,
      TaskMemberEmploy,
      TaskMemberSign,
      TaskInfo,
      PositionList,
      TimeLine,
      TaskCommission,
      TaskPayment
    },
    data() {
      return {
        positionId: '',
        taskId: '',
        taskStatus: '20',
        remunerationTypeModel: '',
        moreOperationsFrom: false,
        financeVisible: false,
        taskType: '',
        queryParams: '',
        activeName: '0',
        activeNum: 1,
        signNum: '0',
        taskNum: '0',
        signNumStatus: true,
        taskNumStatus: true,
        dateNum: '0',
        dateSign: false,
        dateDiv: false,
        starEndTimeSign: [],
        starEndTime: [],
        taskInfo: {},
        taskDetail: {},
        enrollListName: '',
        takelListName: '',
        commissionListName: '',
        logListNum: ''
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      this.queryParams = this.getCurrentPage().query
      if (this.queryParams && this.queryParams.taskId) {
        this.taskId = this.queryParams.taskId.toString()
      }
      if (this.queryParams && this.queryParams.activeName) {
        this.activeName = this.queryParams.activeName.toString()
      }
      this.initTaskInfo()
    },
    mounted() {
      const that = this
      this.$bus.$on('FinanceTaskPayment', function(data) {
        that.financeVisible = false
        that.initTaskInfo()
      })
      this.$bus.$on('TaskMemberChange', function(data) {
        that.countListNum()()
      })
    },
    methods: {
      initTaskInfo() {
        getTaskInfo(this.taskId).then(response => {
          if (response.isError) return
          this.taskInfo = response.data
          this.taskStatus = response.data.taskStatus.toString()
          if (response.data.remunerationTypeModel) {
            this.remunerationTypeModel = response.data.remunerationTypeModel.toString()
          }
          this.taskType = response.data.taskType
          this.taskInfo.enrollStartTime = response.data.enrollStartTime.split(' ')[0]
          this.taskInfo.enrollEndTime = response.data.enrollEndTime.split(' ')[0]
          this.taskInfo.taskStartTime = response.data.taskStartTime.split(' ')[0]
          this.taskInfo.taskEndTime = response.data.taskEndTime.split(' ')[0]
          this.signNum = this.timeCalculation(this.taskInfo.enrollEndTime, this.timeFormat(new Date()))
          this.taskNum = this.timeCalculation(this.taskInfo.taskEndTime, this.timeFormat(new Date()))
          if (this.taskInfo.enrollEndTime >= this.timeFormat(new Date())) {
            this.signNumStatus = true
          } else {
            this.signNumStatus = false
            this.signNum = this.signNum - 1
          }
          if (this.taskInfo.taskEndTime >= this.timeFormat(new Date())) {
            this.taskNumStatus = true
          } else {
            this.taskNumStatus = false
            this.taskNum = this.taskNum - 1
          }
          if (this.taskStatus === '20') {
            this.activeNum = 1
          }
          if (this.taskStatus === '40') {
            if (this.remunerationTypeModel === '12') {
              this.activeNum = 2
            } else {
              this.activeNum = 3
            }
          }
          if (this.taskStatus === '60') {
            if (this.remunerationTypeModel === '12') {
              this.activeNum = 3
            } else {
              this.activeNum = 4
            }
          }
          if (this.taskStatus === '70') {
            this.activeNum = 5
          }
          if (this.taskStatus === '80') {
            this.activeNum = 6
          }
        })
        this.countListNum()
      },
      countListNum() {
        countListNum(this.taskId).then(response => {
          if (response.isError) return
          this.taskDetail = response.data
          this.enrollListName = '报名列表(' + response.data.enrollListNum + ')'
          this.takelListName = '录用列表(' + response.data.takelListNum + ')'
          this.commissionListName = '验收记录(' + response.data.commissionListNum + ')'
          this.logListNum = '任务日志(' + response.data.logListNum + ')'
        })
      },
      handleClick() {
        this.moreOperationsFrom = false
      },
      trusteeship() {
        this.financeVisible = true
      },
      // 结束报名
      buttonClickEnd() {
        // 统计是否还有状态为3的 录用
        doSignEnd(this.taskId).then(response => {
          let name = ''
          if (response.isError) return
          if (response.data === false) {
            name = '该项目还有未签约微客，'
          }
          this.$confirm(name + '是否结束报名?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.updateTaskInfoStatus(60)
          }).catch(() => {
            this.dateSign = false
          })
        })
      },
      // 中止项目
      buttonClickStop() {
        // 校验能不能更改项目状态
        this.$confirm('是否中止项目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateTaskInfoStatus(80)
        }).catch(() => {
        })
      },
      // 更改任务状态
      updateTaskInfoStatus(status) {
        const parms = {
          taskId: this.taskId,
          taskStatus: status
        }
        saveTaskInfoStatus(parms).then(response => {
          if (response.isError) return
          this.$message({
            type: 'success',
            message: '成功!'
          })
          this.initTaskInfo()
        })
      },
      buttonClickSign() {
        if (!this.starEndTimeSign) {
          this.starEndTimeSign = []
        }
        this.starEndTimeSign[0] = this.taskInfo.enrollStartTime.split(' ')[0]
        this.starEndTimeSign[1] = this.taskInfo.enrollEndTime.split(' ')[0]
        this.dateSign = true
      },
      buttonClick() {
        if (!this.starEndTime) {
          this.starEndTime = []
        }
        this.starEndTime[0] = this.taskInfo.taskStartTime.split(' ')[0]
        this.starEndTime[1] = this.taskInfo.taskEndTime.split(' ')[0]
        this.dateDiv = true
      },
      // 时间计数
      timeCalculation(startTime, endTime) {
        const date2 = endTime.split('-')
        const date1 = startTime.split('-')
        const odate2 = new Date(date2[1] + '-' + date2[2] + '-' + date2[0])
        const odate1 = new Date(date1[1] + '-' + date1[2] + '-' + date1[0])
        return parseInt(Math.abs(odate2 - odate1) / 1000 / 60 / 60 / 24) + 1
      },
      changeDateTimeSign() {
        this.$confirm('修改报名时间将有可能影响微客的正常报名。是否确认修改？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const parms = {
            detailId: this.taskInfo.detailId,
            taskId: this.taskId,
            enrollStartTime: this.starEndTimeSign[0] + ' 00:00:00',
            enrollEndTime: this.starEndTimeSign[1] + ' 00:00:00'
          }
          // 数据库更改时间
          saveTaskInfoStatus(parms).then(response => {
            if (response.isError) return
            this.$message({
              type: 'success',
              message: '更改成功!'
            })
            this.dateSign = false
            this.initTaskInfo()
          })
        }).catch(() => {
          this.dateSign = false
        })
      },
      changeDateTime() {
        this.$confirm('此操作将更改任务周期, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const parms = {
            detailId: this.taskInfo.detailId,
            taskId: this.taskId,
            taskStartTime: this.starEndTime[0] + ' 00:00:00',
            taskEndTime: this.starEndTime[1] + ' 00:00:00'
          }
          // 数据库更改时间
          saveTaskInfoStatus(parms).then(response => {
            if (response.isError) return
            this.$message({
              type: 'success',
              message: '更改成功!'
            })
            this.dateDiv = false
            this.initTaskInfo()
            if (this.activeName === '0') {
              // 任务详情刷新
              const that = this
              that.$refs.taskInfoDetail.initTaskInfo()
            }
          })
        }).catch(() => {
          this.dateDiv = false
        })
      },
      // 更多
      moreOperations() {
        if (this.moreOperationsFrom) {
          this.moreOperationsFrom = false
        } else {
          this.moreOperationsFrom = true
        }
      },
      timeFormat(date) {
        const year = date.getFullYear()
        let mounth = date.getMonth() + 1
        let day = date.getDate()
        if (mounth < 10) {
          mounth = '0' + mounth
        }
        if (day < 10) {
          day = '0' + day
        }
        return year + '-' + mounth + '-' + day
      }
    }
  }
</script>
